<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link type="text/css" rel="stylesheet" href="../../c-asserts/mui/css/mui.min.css"/>
		<link type="text/css" rel="stylesheet" href="../../c-asserts/sui/sui1.0.1.css"/>
		<link type="text/css" rel="stylesheet" href="../../c-asserts/swiper/css/swiper.min.css"/>
		<link type="text/css" rel="stylesheet" href="../../c-asserts/swiper/swipierlis.css"/>
		<style type="text/css">
			.content-item {
				background-color: #ffffff;
			}
			.content-title {
				font-size: 16px;
				font-weight: 400;
			}
			.padding10px {
				padding: 10px;
			}
			.borderbuttom1pxgray {
				border-bottom: 1px solid #f4f4f4;
			}
			.content-box {
				border-bottom: 1px solid #f4f4f4;
			}
			.content-star-box {
				width: 100px;
				background-color: #c4c2c2;
			}
			.content-redtoole {
				width: 0px;
				height: 21px;
				background-color: #ff7720;
			}
			.content-star {
				width: 100px;
				background-image: url(../../image/star.png);
				background-size: 100% 100%;
				background-position: center center;
				background-repeat: no-repeat;
				height: 21px;
			}
			.content-count {
				color: #ff7720;
				width: 50px;
				text-align: center;
				height: 21px;
				line-height: 23px;
			}
			.content-weizhi {
				text-align: right;
				color: #8f8f94;
				font-size: 14px;
			}
			.doorimg {
				width: 100px;
				height: 70px;
			}
			.doorimg img {
				width: 90px;
				height: 70px;
			}
			.door-name {
				font-size: 14px;
			}
			.content-type {
				color: #8f8f94;
				font-size: 14px;
			}
			.content-money {
				color: #ff7720;
				font-size: 14px;
			}
			.content-out {
				text-align: right;
				font-size: 14px;
				color: #8f8f94;
			}
			.margintop12 {
				margin-top: 12px;
			}
			.footer {
				text-align: center;
				padding-top: 40px;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="lisContent"></div>
		<div class="footer">
			<p>
				暂无数据
			</p>
		</div>
	</body>
	<script type="text/javascript" src="../../c-script/api.js"></script>
	<script type="text/javascript" src="../../c-script/jquery-2.1.3.min.js"></script>
	<script type="text/javascript" src="../../c-script/jquery.lazyload.min.js"></script>
	<script type="text/javascript" src="../../c-script/public.js"></script>
	<script type="text/javascript" src="../../c-script/template.js"></script>
	<script type="text/javascript" src="../../c-asserts/swiper/js/swiper.min.js"></script>
	<script type="text/template" id="temp">
		{{each list as val i}}
		<div class="content-item">
		{{if i == 0 || list[i].shopid != list[i-1].shopid }}
		<div class="padding10px borderbuttom1pxgray margintop12">
		<div class="sui-flex-row">
		<div class="content-title ">{{val.shopname}}</div>
		<div class="sui-flex1 content-weizhi">{{val.area}} {{val.street}}</div>
		</div>
		<div></div>
		</div>
		{{/if}}
		<div class="content-box padding10px" data-frameId="{{val.themeid}}" onclick="toOptioninfo(this)">
		<div class="door-item sui-flex-row">
		<div class="doorimg"><img class="lazyload" src="../../image/loading.gif" data-original="{{val.coverimg}}"></div>
		<div class="sui-flex1 sui-flex-col">
		<div class="door-name">{{val.themename}}</div>
		<div class="sui-flex1"></div>
		<div class="sui-flex-row">
		<div class="sui-flex1 content-type">{{val.content_}}</div>
		<div class="content-money">￥{{val.displayprice}}</div>
		</div>
		<div class="sui-flex1"></div>
		<div class="sui-flex-row">
		<div class="content-star-box">
		<div class="content-redtoole" data-width="{{val.evalstar}}"><div class="content-star"></div></div>
		</div>
		<div class="sui-flex1 content-out">已售：{{val.soldnum}}</div>
		</div>
		</div>
		</div>
		</div>
		</div>
		{{/each}}
	</script>
	<script type="text/javascript">
		var pageindex;
		//当前页
		var paramdata = {};
		apiready = function() {
			getDatalis(paramdata);
			//默认请求
			//下拉刷新
			api.setRefreshHeaderInfo({
				visible : true,
				bgColor : '#ccc',
				textColor : '#fff',
				textDown : '下拉刷新...',
				textUp : '松开刷新...',
				showTime : true
			}, function(ret, err) {
				//在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
				getDatalis(paramdata);
			});
			api.addEventListener({
				name : 'mainlis'
			}, function(ret, err) {
				var param = ret.value;
				getDatalis(param);
			});
		};
		//post.  请求后台数据
		function getDatalis(param) {
			paramdata = param;
			pageindex = 1;
			param.page = pageindex;
			param.pagesize = pagesize;
			api.showProgress();
			myPostAjax('theme/getTheme.json', {
				code : getUserCode()
			}, function(ret, err) {
				api.hideProgress();
				api.refreshHeaderLoadDone();
				if (ret && ret.length > 0) {
					ret = reviewdata(ret);
					$('.lisContent').html(listoString(ret, $('#temp').html()));
					showfooter();
					if (ret.length == pagesize)
						scrolltobottom(param);
				} else
					hidenfooter();
			})
		}

		//加载更多
		function scrolltobottom(param) {
			api.addEventListener({
				name : 'scrolltobottom',
				extra : {
					threshold : 0
				}
			}, function(ret, err) {
				pageindex++;
				param.page = pageindex;
				myPostAjax('theme/getTheme.json', {
					code : getUserCode()
				}, function(ret, err) {
					if (ret && ret.length > 0) {
						ret = reviewdata(ret);
						$('.lisContent').append(listoString(ret, $('#temp').html()));
						showfooter();
					}
				});
			});
		}

		//对数据的一些简单处理
		function reviewdata(data) {
			for (var i = 0; i < data.length; i++) {
				for (var l = 0; l < icontent.length; l++) {
					if (data[i].content == icontent[l].id)
						data[i].content_ = icontent[l].name + '，';
				}
				for (var j = 0; j < icategory.length; j++) {
					if (data[i].category == icategory[j].id)
						data[i].content_ += icategory[j].name;
				}
			}
			return data;
		}

		//对footer显示的一些处理  show
		function showfooter() {
			$('.footer').css('display', 'none');
			$('.content-redtoole').each(function(index, ele) {
				$(ele).css('width', $(ele).attr('data-width') * 20 + 'px');
			});
			$(".lazyload").lazyload();
		}

		//对footer隐藏的一些处理   hide
		function hidenfooter() {
			$('.lisContent').html('');
			$('.footer').css('display', 'block');
			api.removeEventListener({
				name : 'scrolltobottom'
			});
		}

		//打开主题详细
		function toOptioninfo(obj) {
			var themeid = $(obj).attr('data-frameId');
			api.openWin({
				name : 'theme',
				url : '../main/theme.html',
				pageParam : {
					themeid : themeid
				}
			})
		}
	</script>
</html>